import React, {useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';
import {MaterialTab} from "../material-management";

export interface DepartmentData {
  department: string;
  task: string;
  count: number;
  unit?: string;
}

export interface CollaborativeDisposalProps {
  // 容器样式
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;
  borderColor?: string;
  borderOpacity?: number;

  // 标题配置
  title?: string;
  titleFontSize?: number;
  titleColor?: string;
  titleFontFamily?: string;
  titleFontWeight?: number;
  titleLineHeight?: number;
  titleLetterSpacing?: number;
  titleBackground?: string;
  titleShadow?: string;

  // 英文副标题配置
  subtitle?: string;
  subtitleFontSize?: number;
  subtitleColor?: string;
  subtitleFontFamily?: string;
  subtitleFontWeight?: number;
  subtitleLineHeight?: number;
  subtitleLetterSpacing?: number;
  subtitleOpacity?: number;

  // 时间选择器配置
  timeSelectorIconPath?: string;
  timeSelectorWidth?: number;
  timeSelectorHeight?: number;
  timeSelectorBackgroundColor?: string;
  timeSelectorBorderColor?: string;
  timeSelectorText?: string;
  timeSelectorTextFontSize?: number;
  timeSelectorTextColor?: string;
  timeSelectorTextFontFamily?: string;
  timeSelectorTextFontWeight?: number;
  timeSelectorTextLineHeight?: number;
  timeSelectorTextLetterSpacing?: number;

  // 数据配置
  departments?: DepartmentData[];
  departmentSpacing?: number;
  departmentWidth?: number;
  departmentHeight?: number;
  columns?: number;

  // 部门名称配置
  departmentFontSize?: number;
  departmentColor?: string;
  departmentFontFamily?: string;
  departmentFontWeight?: number;
  departmentLineHeight?: number;
  departmentLetterSpacing?: number;

  // 任务名称配置
  taskFontSize?: number;
  taskColor?: string;
  taskFontFamily?: string;
  taskFontWeight?: number;
  taskLineHeight?: number;
  taskLetterSpacing?: number;

  // 数值配置
  countFontSize?: number;
  countColor?: string;
  countFontFamily?: string;
  countFontWeight?: number;
  countLineHeight?: number;
  countLetterSpacing?: number;
  countBackground?: string;

  // 单位配置
  unitFontSize?: number;
  unitColor?: string;
  unitFontFamily?: string;
  unitFontWeight?: number;
  unitLineHeight?: number;
  unitLetterSpacing?: number;

  // 布局配置
  layout?: 'grid' | 'flex';
  gap?: number;

  // 事件
  onDepartmentClick?: (department: DepartmentData, index: number) => void;
  onTimeSelectorClick?: () => void;
  onClick?: () => void;

  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const CollaborativeDisposal = forwardRef<HTMLDivElement, CollaborativeDisposalProps>((props, ref) => {
  const {
    title,
    tabs = [
      { id: '1', text: '当日', isActive: true },
      { id: '2', text: '当月', isActive: false }
    ],
    // 英文副标题配置
    subtitle = 'Co-processing',
    // 数据配置
    departments = [
      { department: '公安', task: '出动警力', count: 99, unit: '人' },
      { department: '交警', task: '出动警力', count: 99, unit: '人' },
      { department: '交通执法', task: '出动警力', count: 99, unit: '人' },
      { department: '城管', task: '流浪乞讨', count: 99, unit: '人' },
      { department: '城管', task: '出动警力', count: 99, unit: '人' },
      { department: '市场监管', task: '出动警力', count: 99, unit: '人' },
      { department: '市场监管', task: '执法巡查', count: 99999, unit: '人' },
      { department: '市场监管', task: '广告检查', count: 99, unit: '人' }
    ],

    // 事件
    onDepartmentClick,
    onTimeSelectorClick,
    onClick,

    // 其他属性
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const containerStyle: React.CSSProperties = {
    width: `500px`,
    height: `260px`,
    ...style
  };
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const handleDepartmentClick = (department: DepartmentData, index: number) => {
    if (onDepartmentClick) {
      onDepartmentClick(department, index);
    }
  };
  const handleTimeSelectorClick = (tab: MaterialTab, index: number) => {
    setActiveTabIndex(index)
    if (onTimeSelectorClick) {
      onTimeSelectorClick();
    }
  };
  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };
  const collaborativeDisposalClassName = [
    'collaborative-disposal',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={collaborativeDisposalClassName}
      style={containerStyle}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
        <div className="title-str">
          <div className="title">
            <div>{title}</div>
            <div className="sen-title">{title}</div>
          </div>
          <div className="subtitle">{subtitle}</div>
        </div>
        <div className="tab-selector">
          {tabs.map((tab, index) => (
            <div
              key={tab.id}
              className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
              onClick={() => handleTimeSelectorClick(tab, index)}
            >
              {tab.text}
            </div>
          ))}
        </div>
      </div>
      <div className="content-wrap">
        {departments.map((item, index) => (
          <div className="content-item">
            <div className="item-left">
              <div className="left-title">{item.department}</div>
              <div className="left-str">{item.task}</div>
            </div>
            <div className="value">
              <div>{item.count}</div>
              <span style={{fontSize: '12px', paddingBottom: '3px'}}>{item.unit}</span>
            </div>
          </div>
        ))}
      </div>
      <div className="bottom-line" />
    </div>
  );
});

CollaborativeDisposal.displayName = 'CollaborativeDisposal';

export default CollaborativeDisposal;
